<template>
    <Tabs class="container">
      <Tab-pane label="Api列表">
        <div class="tool-wrap">
          <Button-group class="rf">
            <i-button type="ghost" icon="plus" class="tool-btn" @click="showModal()">增加Api</i-button>
            <i-button type="ghost" icon="trash-a" class="tool-btn" @click="deleteApis()">批量删除Api</i-button>
          </Button-group>
        </div>
        <i-table ref="apiTable" class="table-wrap" border :columns="columns" :data="apiList" @on-selection-change="selectionChange">

        </i-table>
        <Page class="page-wrap" :total="pageConfig.total" :current="pageConfig.page" :pageSize="pageConfig.pageSize"
              @on-change="pageChange" @on-page-size-change="pageSizeChange" :page-size-opts="[10,20,30,50]" show-sizer show-elevator show-total placement="top"></Page>
      </Tab-pane>

      <Modal v-model="modal.show" :title="modal.title" :loading="modal.loading" @on-ok="saveApi" ok-text="保存" cancel-text="关闭">
        <i-form :ref="modal.formName" :model="modal.formData" :rules="modal.rules" :label-width="80">
          <Form-item label="接口路径" prop="path">
            <i-input v-model="modal.formData.path" placeholder="请输入接口路径"></i-input>
          </Form-item>
          <Form-item label="功能描述" prop="describe">
            <i-input v-model="modal.formData.describe" placeholder="请输入功能描述"></i-input>
          </Form-item>
        </i-form>
      </Modal>
    </Tabs>
</template>
<script type="text/ecmascript-6">
  import api from '../../../api/admin/action'
  import {isConfirm} from '../../../assets/admin/js/common'

  const emptyData = {
    id: 0,
    path: '',
    describe: ''
  }

  export default{
    components: {},
    props: [],
    data () {
      return {
        modal: {
          show: false,
          title: '',
          loading: false,
          formName: 'apiForm',
          formData: { ...emptyData }
        },
        rules: {
          path: [
            {required: true, message: '请填写接口路径', trigger: 'blur'},
            {type: 'string', message: '最大长度为60字符', trigger: 'blur'}
          ],
          describe: [
            {required: true, message: '请填写功能描述', trigger: 'blur'},
            {type: 'string', message: '最大长度为100字符', trigger: 'blur'}
          ]
        },
        apiList: [],
        columns: [
          {
            type: 'selection',
            width: 62,
            align: 'center'
          },
          {
            title: '接口路径',
            key: 'path'
          },
          {
            title: '功能描述',
            key: 'describe'
          },
          {
            title: '操作',
            className: 'option-column',
            render: this.actionRender
          }
        ],
        pageConfig: {
          page: 1,
          pageSize: 10,
          total: 0
        },
        selection: {}
      }
    },
    methods: {
      actionRender (h, params) {
        let self = this
        return h('div', [
          h('Tooltip', {props: {content: '编辑', placement: 'top'}}, [h('Button', {props: {type: 'text', icon: 'edit'}, on: {click: () => { self.showModal(params.row) }}})]),
          h('Tooltip', {props: {content: '删除', placement: 'top'}}, [h('Button', {props: {type: 'text', icon: 'trash-a'}, on: {click: () => { self.deleteApi(params.row) }}})])
        ])
      },
      showModal (api) {
        const self = this
        self.modal.formData = {...emptyData}
        self.modal.title = '新增接口'
        if (api) {
          self.modal.title = '编辑接口'
          self.modal.formData = api
        }
        self.modal.show = true
      },
      selectionChange (selection) {
        this.selection = selection
      },
      pageChange (page) {
        this.pageConfig.page = page
        this.getUserList()
      },
      pageSizeChange (pageSize) {
        this.pageConfig.pageSize = pageSize
        this.getApiList()
      },
      getApiList () {
        const self = this
        const {page, pageSize} = self.pageConfig
        api.getApiList({page, pageSize}, data => {
          self.pageConfig.total = data.count
          self.apiList = data.data
        })
      },
      saveApi () {
        const self = this
        self.$refs[self.modal.formName].validate(valid => {
          if (!valid) {
            return
          }
          api.saveApi(self.modal.formData, () => {
            self.modal.show = false
            self.$Message.success('用户保存成功')
            self.getApiList()
          })
        })
      },
      deleteApi (row) {
        let self = this
        isConfirm(`删除Api【${row.describe}】？`, () => {
          api.deleteApi(row.id, () => {
            self.$Message.success(`删除Api【${row.describe}】成功！`)
            self.getApiList()
          })
        })
      },
      deleteApis () {
        let self = this
        let apiIds = []
        let names = []
        self.selection.forEach(user => {
          apiIds.push(user.id)
          names.push(user.describe)
        })
        isConfirm(`删除Api【${names.join(',')}】？`, () => {
          api.deleteApis(apiIds, () => {
            self.$Message.success(`删除Api【${names.join(',')}】成功！`)
            self.getApiList()
          })
        })
      }
    },
    mounted () {
      this.getApiList()
    }
  }
</script>
<style lang="less">
</style>
